<?php
// Home

$page->title = 'Home';
$page->script( <<<SCRIPT
  $(function(){

    // Load the tweets
    $('#tweets').load('tweets/show',function() {
      $(this).fadeIn(800);
    });

  });
SCRIPT
);

?>

<div class="row">
  <div class="nine columns" id="slider">
    <?php snippet('slider.php', array('page'=>$page)) ?>
  </div>
  <div class="three columns">
    <ul class="slider__sidekicks l-stacked l-mobile-inline">
        <li>
          <a href="<?= url('invitation/volunteer') ?>">
            <img src="<?= img('volunteer-icon.png') ?>" alt="Volunteer at the ROC">
          </a>
        </li>
        <li>
          <a href="<?= url('community-resource-directory') ?>">
            <img src="<?= img('CRD-icon.png') ?>" alt="Check out the Community Resource Directory">
          </a>
        </li>
    </ul>
  </div>
</div>

<hr>

<div class="callout">
    <div style="display: table; width: 100%;">
        <div style="display: table-cell; text-align: right; vertical-align: middle; width: 66.6666%; padding: 0.5em;">
            <span class="callout__title">Room In The Inn</span>
            <p>Help us fill an immediate need to house the homeless this March!</p>
        </div>
        <div style="display: table-cell; text-align: left; vertical-align: middle; width: 33.3333%; padding: 0.5em;">
            <span class="callout__cta"><a href="<?= url('blog/2015/03/room-in-the-inn'); ?>" class="button">Act Now</a></span>
        </div>
    </div>
</div>

<hr>

<section>
    <figure>
        <a href="<?php echo url('services/roc-emporium') ?>">
            <img src="images/roc-emporium-logo-small.png">
        </a>
    </figure>
    <header class="hgroup">
        <h1>ROC Emporium</h1>
        <p><a href="<?php echo url('services/roc-emporium') ?>" class="button small">Read More &raquo;</a></p>
    </header>
    <p>A retail store, selling A-Z donated goods, represents a multifaceted
    approach for job creation, job training, available resources for those
    in need, responsible non-profit management, and community
    involvement.</p>
</section>

<hr>

<div class="row">
  <div class="three columns mobile-two">
    <section>
      <p class="large tight" align="center">
        <img src="<?= img('social-featured-items.png') ?>" alt="Social Sphere"><br>
        Social Sphere
      </p>
      <hr class="dotted">
      <div class="tab-box">
          <ul class="tab-box__nav">
              <li><a href="#fb-tab">Facebook</a></li>
              <li><a href="#tweet-tab">Twitter</a></li>
          </ul>
          <div id="fb-tab" class="tab-box__tab fb-like-box" data-href="https://www.facebook.com/renewoc" data-width="213" data-height="450" data-colorscheme="dark" data-show-faces="false" data-header="false" data-stream="true" data-show-border="false"></div>
          <div id="tweet-tab" class="tab-box__tab">
              <div id="tweets">Loading Tweets....</div>
          </div>
      </div>
    </section>
  </div>
  <div class="three columns mobile-two">
    <section>
      <p class="large tight" align="center">
        <img src="<?= img('news-featured-items.png') ?>" alt="News"><br>
        News
      </p>
      <hr class="dotted">
      <?php module('blog','show',array('limit'=>4)) ?>
<?php /*
      <hr class="dotted">
      <p class="large tight">Community News</p>
      <?php module('blog','show',array('limit'=>4, 'dir'=>'news:community')) ?>
 */ ?>
    </section>
  </div>
  <div class="three columns mobile-two">
    <section>
      <p class="large tight" align="center">
        <img src="<?= img('jobs-featured-items.png') ?>" alt="Job Opportunities"><br>
        Job Opportunities
      </p>
      <hr class="dotted">
      <?php snippet('job-opportunities.php') ?>
    </section>
  </div>
  <div class="three columns mobile-two">
    <section>
      <p class="large tight" align="center">
        <img src="<?= img('needs-featured-items.png') ?>" alt="Needs List"><br>
        Items Needed
      </p>
      <hr class="dotted">
      <?php snippet('items-needed.php') ?>
      <p>
        <a href="<?= url('invitation/needs-list') ?>" class="button">See the needs list</a>
      </p>
    </section>
  </div>
</div>
